<template>
	<el-container>
		<el-main class="nopadding">
			<div class="top-panel">
				<el-button type="primary" icon="el-icon-edit" @click="edit">{{ $t('short_data.video.edit') }}</el-button>
			</div>
			<scTable v-show="tableData.length" ref="rankTable" :apiObj="apiObj" row-key="id" stripe border :params="sendParams" :hideSetting="true"
				@sortChange="sortChange" :sortType="direction" width="100%" @dataChange="dataChange" :isCover="isCover">
				<el-table-column :label="$t('short_data.table.coverPicture')" width="120">
					<template #default="scope">
						<img :src="scope.row.coverPicture" style="width: 72px;object-fit: contain;">
					</template>
				</el-table-column>
				<el-table-column :label="$t('short_data.table.shortsName')" width="500">
					<template #default="scope">
						{{ setShortName(scope.row.shortName) }}
					</template>
				</el-table-column>
				<el-table-column :label="$t('hotTable.sort')" width="200">
					<template #default="scope">
						<div class="editBox">
							<el-input class="borderless-input" v-model="scope.row.sort" :disabled="!isEdit"></el-input>
							<el-button v-if="isEdit" type="primary" size="small" @click="saveCount(scope.row)">{{ $t('table_data.saveText') }}</el-button>
							<el-icon v-else class="editIcon" size="22" @click="isEdit=true" color="#BB9B51"><component :is="oicon('el-icon-edit')" /></el-icon>
						</div>
					</template>
				</el-table-column>
				<el-table-column :label="$t('short_data.video.movieType')" width="120">
					<template #default="scope">
						{{ scope.row.movieGenreName&&scope.row.movieGenreName[$i18n.locale] }}
					</template>
				</el-table-column>
				<el-table-column :label="$t('short_data.form.startDate')" prop="startDate" width="auto" sortable="startDateDirection"></el-table-column>
			</scTable>
		</el-main>
	</el-container>
</template>

<script>

export default {
	name: "client",
	components: {

	},
	data() {
		return {
			isCover: false,
			cindex: 0,
			direction: '',
			tableData: [],
			isEdit: false,
			movieData: [

			],
			theatreData: [

			],
			dialog: {
				save: false
			},
			search: {
				keyword: ""
			},
			apiObj: {},
			selection: [],
			searchKey: null,
			params: {

			},
			sendParams: {
			}
		}
	},
	computed: {
		oicon(){
			return function(e){
				return e
			}
		},
		setShortName(){
			return (e)=>{
				return e&&e[this.$i18n.locale]
			}
		},
		setShortEpi(){
			return (e)=>{
				return this.cindex==2?e.episode:e.episodeCount
			}
		},
	},
	async created() {
		this.apiObj = this.$API.shorts.getHotShortsList;
	},
	methods: {
		saveCount(item) {
			let params = {
			  sort: Number(item.sort),
			}
			let id = item.shortId;
			this.$API.shorts.putHotWorkData.put(id, params).then((res) => {
				if(res.code == 'OK') {
					this.$message.success(this.$t('table_data.operasucc'));
					this.isEdit=false;
					this.upsearch();
				}
			});
		},
		tabClick(obj){
			this.cindex = Number(obj.index);
			// this.tableData = []
			this.isCover = false
			if(obj.index == '2'){
				this.sendParams.status = null;
				this.isCover = true
				this.apiObj = this.$API.shorts.getShortsDraftList;
			}else{
				if(obj.index == '1')this.params.status = 3
				if(obj.index == '0')this.params.status = null
				this.apiObj = this.$API.shorts.getShortsList;
				this.upsearch()
			}
		},
		dataChange(d){
			this.tableData = d.data.list || [];
			console.log('callback',this.tableData);
		},
		sortChange(obj){
			console.log('sortChange',obj);
			if(obj.order){
				if(obj.prop == 'year')this.sendParams.sortKey = obj.order=='descending'?'descYear':'ascYear'
			}else{
				this.sendParams.sortKey = null
			}
		},
		closeTag(){
			const tagList = this.$store.state.viewTags.viewTags;
			const tag = this.$route;
			const nowTagIndex = tagList.findIndex(item => item.fullPath == tag.fullPath)
			this.$store.commit("removeViewTags", tag)
			this.$store.commit("removeIframeList", tag)
			this.$store.commit("removeKeepLive", tag.name)

			const leftView = tagList[nowTagIndex - 1]
			if (leftView) {
				this.$router.push(leftView)
			} else {
				this.$router.push('/')
			}
		},
    edit() {
			this.$router.push({path:'/shortTable/hotrecommend/client/save'})
    },
		reset() {
			// this.params.currency = null;
			// this.params.movieId = null;
			// this.params.category = null;
			this.params.startDate = null;
			this.params.endDate = null;
			this.params.language = null;
			this.upsearch();
			// this.$refs.table.upData(this.params);
		},
		upsearch() {
			// Object.assign(this.sendParams,this.params);
			this.$refs.rankTable.upData();
		},
		//表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection;
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'add') {
				data.id = new Date().getTime()
				this.$refs.table.tableData.unshift(data)
			} else if (mode == 'edit') {
				this.$refs.table.tableData.filter(item => item.id === data.id).forEach(item => {
					Object.assign(item, data)
				})
			}
		},
		beforeOptions(v){
			if(!this.params.endDate)return false
			return v.getTime() > new Date(this.params.endDate).getTime();//  - 86400000是否包括当天
		},
		backOptions(v){
			return v.getTime() < new Date(this.params.startDate).getTime();//  - 86400000是否包括当天
		},
	}
}
</script>

<style scoped lang="scss">
.border-card {
	margin: 10px;
	width: 100%;
}
:deep .el-tabs__item {
	font-size: 20px;
	height: 60px;
	line-height: 60px;
}
.addbox {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	color: #333;
	background: #F6F8F9;
	width: 640px;
	height: 480px;
	border: 2px dashed #888;
	border-radius: 5px;
	margin: 100px auto;
	cursor: pointer;
}
.editBox {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.editBox img {
	width: 26px;
	cursor: pointer;
}
:deep(.borderless-input .el-input__wrapper) {
  box-shadow: none !important;
	color: white !important;
}
/* 悬停状态 */
:deep(.borderless-input .el-input__wrapper:hover) {
  box-shadow: none !important;
	color: white !important;
}
/* 聚焦状态 */
:deep(.borderless-input .el-input__wrapper.is-focus) {
  box-shadow: none !important;
	color: white !important;
}
.addbox img {
	width: 100px;
}
.addbox span {
	margin-top: 20px;
	text-align: center;
}

.module-filter {
	margin-right: 10px;
}

.el-header {
	--el-header-height: auto;
}

.left-panel {
	flex-wrap: wrap;
	line-height: 50px;
}

.top-panel {
	margin: 10px;
}

:deep .scTable {
	height: calc(100% - 60px) !important;
	min-width: 100% !important;
}
:deep .scTable-table {
	min-width: 100% !important;
}
:deep .scTable .el-table {
	min-width: 100% !important;
}

.el-main.nopadding {
	margin: 0 10px;
}

.el-header {
	margin: 10px;
	border-radius: 4px;
}

@media only screen and (max-width: 820px) and (min-width: 768px) {
	.module-filter {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    margin: 0 10px;
	}
	.btns {
    margin: 10px;
    width: 340px;
    flex-direction: row;
	}
}
</style>
